<template>
  <div class="Modal-info-wrapper">
    <a-row :gutter="40">
      <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
        <div class="real-data-box">
          <div class="title">实时数据</div>
          <div class="sub-title">炼铁2号高炉炉前除尘出口</div>
          <a-table class="modal-table" :columns="columns" :data-source="tableData" :pagination="false" :rowKey="(row) => row.id"></a-table>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
        <div class="video-box">
          <div class="title">实时视频</div>
          <div class="sub-title clearfix">
            <img src="~@/assets/img/close.png" @click="$emit('closeDialog')" alt="">
            <img src="~@/assets/img/fullscreen.png" @click="goFull" alt="">
          </div>

          <video-player class="video-player-box" ref="videoPlayer"
            :options="playerOptions">
          </video-player>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const columns = [
  {
    title: '检测项目',
    dataIndex: 'aaa',
    key: 'aaa',
  },
  {
    title: '标准值',
    dataIndex: 'bbb',
    key: 'bbb',
  },
  {
    title: '实测值',
    dataIndex: 'ccc',
    key: 'ccc',
  }
]

// const tableData = [
//   {
//     aaa: '烟气流速(mg/s)',
//     bbb: '15.000',
//     ccc: '13.850'
//   },
//   {
//     aaa: '烟气流速(mg/s)',
//     bbb: '15.000',
//     ccc: '13.850'
//   },
//   {
//     aaa: '烟气流速(mg/s)',
//     bbb: '15.000',
//     ccc: '13.850'
//   }
// ]

export default {
  name: 'ModalInfo',
  props: {
    tableData: {
      type: Array,
      default: () => ([])
    },
    videoSrc: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      columns
    }
  },
  computed: {
    playerOptions () {
      return {
        muted: true, // 默认情况下将会消除任何音频
        language: 'en',
        preload : 'auto',
        playbackRates: [0.7, 1.0, 1.5, 2.0], //可选择的播放速度
        fluid: true, // 当true时，Video.js player将拥有流体大小。它将按比例缩放以适应其容器
        sources: [{
          type: 'video/mp4',
          // src: require('@/assets/img/movie.mp4')
          src: this.videoSrc
        }],
        poster: require('@/assets/img/ceshi.png')
      }
    },
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    goFull () {
      this.player.requestFullscreen()
    }
  },
  mounted () {
    console.log(this.player)
  }
}
</script>

<style lang="less" scoped>
.Modal-info-wrapper {
  color: #ffffff;
  .real-data-box {
    width: 100%;
    .title {
      height: 48px;
      line-height: 48px;
      font-size: 28px;
      font-family: zcoolwenyiti;
      text-align: center;
      background-image: url('~@/assets/img/shortbg.png');
      background-size: 100% 100%;
    }
    .sub-title {
      font-size: 16px;
      font-family: zcoolwenyiti;
      padding: 10px 0;
      text-align: center;
    }
    /deep/.modal-table {
      tr>th,tr>td {
        background: transparent;
        color: #ffffff;
        font-size: 14px;
        border-color: transparent;
      }
      tr>th {
        background-color: rgba(207, 230, 230, 0.2);
        color: #CFE6E6;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      tr>td {
        color: #ACBFBF;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .ant-table-placeholder {
        background-color: transparent;
        border-color: transparent;
        .ant-empty-normal {
          color: #ffffff;
        }
      }
    }
  }
  .video-box {
    .title {
      height: 48px;
      line-height: 48px;
      font-size: 28px;
      font-family: zcoolwenyiti;
      text-align: center;
      background-image: url('~@/assets/img/longbg.png');
      background-size: 100% 100%;
    }
    .sub-title {
      padding: 12px 0;
      img {
        float: right;
        margin-right: 10px;
        cursor: pointer;
      }
    }
    /deep/.video-player-box {
      .video-js {
        // width: 100%;
      }
    }
  }
}
</style>
